import { Card } from '@/components/ui/card'
import { LoginLog } from '@/types/monitor'

interface LoginLogStatsProps {
  logs: LoginLog[]
}

export function LoginLogStats({ logs }: LoginLogStatsProps) {
  const stats = [
    {
      label: '总登录次数',
      value: logs.length,
      color: 'text-blue-600',
      bg: 'bg-blue-100',
    },
    {
      label: '成功登录',
      value: logs.filter(l => l.status === 'success').length,
      color: 'text-green-600',
      bg: 'bg-green-100',
    },
    {
      label: '失败登录',
      value: logs.filter(l => l.status === 'failed').length,
      color: 'text-red-600',
      bg: 'bg-red-100',
    },
    {
      label: '今日登录',
      value: logs.filter(l => {
        const logDate = new Date(l.loginTime)
        const today = new Date()
        return logDate.toDateString() === today.toDateString()
      }).length,
      color: 'text-purple-600',
      bg: 'bg-purple-100',
    },
  ]

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      {stats.map((stat, index) => (
        <Card key={index} className="p-4">
          <div className="text-sm text-muted-foreground">{stat.label}</div>
          <div className={`mt-2 ${stat.color}`}>{stat.value}</div>
        </Card>
      ))}
    </div>
  )
}