import { Button } from '@renderer/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
} from '@renderer/components/ui/card'
import { recentTasks } from '@renderer/student/mockData'

import { TaskRow } from './TaskRow'

export function TaskQueue(): React.JSX.Element {
  return (
    <Card className="shadow-none">
      <CardHeader className="flex flex-row items-center justify-between space-y-0">
        <div>
          <CardDescription>任务队列</CardDescription>
          <CardTitle className="mt-1 text-base">最近运行</CardTitle>
        </div>
        <Button size="sm" variant="outline">
          查看全部
        </Button>
      </CardHeader>
      <CardContent className="space-y-3">
        {recentTasks.map((task) => (
          <TaskRow key={task.title} icon={task.icon} title={task.title} value={task.value} />
        ))}
      </CardContent>
    </Card>
  )
}
