import Link from 'next/link'
import { CheckCircle2, Circle } from 'lucide-react'

interface List {
  id: string
  title: string
  color: string
  items: Array<{
    id: string
    completed: boolean
  }>
}

export default function ListCard({ list }: { list: List }) {
  const completedCount = list.items.filter(item => item.completed).length
  const totalCount = list.items.length
  const progress = totalCount > 0 ? (completedCount / totalCount) * 100 : 0

  return (
    <Link href={`/list/${list.id}`}>
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer">
        <div className="flex items-center gap-3 mb-4">
          <div 
            className="w-4 h-4 rounded-full" 
            style={{ backgroundColor: list.color }}
          />
          <h3 className="font-semibold text-gray-900 truncate">{list.title}</h3>
        </div>
        
        <div className="space-y-3">
          <div className="flex items-center justify-between text-sm text-gray-600">
            <span>{completedCount} of {totalCount} completed</span>
            <span>{Math.round(progress)}%</span>
          </div>
          
          <div className="w-full bg-gray-200 rounded-full h-2">
            <div 
              className="h-2 rounded-full transition-all duration-300"
              style={{ 
                width: `${progress}%`,
                backgroundColor: list.color 
              }}
            />
          </div>
        </div>
      </div>
    </Link>
  )
}