import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { CheckCircle2 } from 'lucide-react';

export function TasksWidget() {
  return (
    <Card className="col-span-1 shadow-sm">
      <CardHeader className="flex flex-row items-center justify-between pb-2">
        <div className="flex items-center gap-2">
          <CheckCircle2 className="w-5 h-5 text-gray-700" />
          <CardTitle className="text-base font-semibold">Tasks</CardTitle>
        </div>
        <span className="text-xs font-semibold text-blue-600 bg-blue-50 px-2 py-1 rounded-full">6 pending</span>
      </CardHeader>
      <CardContent>
        <div className="text-xs text-muted-foreground mb-4">Pending and assigned tasks</div>
        <div className="space-y-4">
          <div className="flex items-start justify-between border-l-2 border-green-500 pl-3">
            <div>
              <div className="text-sm font-semibold text-gray-900">Inventory check</div>
              <div className="text-xs text-gray-500">Main warehouse</div>
            </div>
            <span className="text-[10px] bg-green-100 text-green-700 px-1.5 py-0.5 rounded">Today</span>
          </div>
          <div className="flex items-start justify-between border-l-2 border-yellow-500 pl-3">
            <div>
              <div className="text-sm font-semibold text-gray-900">Supplier review</div>
              <div className="text-xs text-gray-500">Quality assessment</div>
            </div>
            <span className="text-[10px] bg-yellow-100 text-yellow-700 px-1.5 py-0.5 rounded">Tomorrow</span>
          </div>
          <div className="flex items-start justify-between border-l-2 border-blue-500 pl-3">
            <div>
              <div className="text-sm font-semibold text-gray-900">Sensor calibration</div>
              <div className="text-xs text-gray-500">Production line #2</div>
            </div>
            <span className="text-[10px] bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded">Next week</span>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}