"use client"

import { useTranslations } from "next-intl"
import { Database } from "lucide-react"
import { type ReactElement } from "react"

import { Input } from "@/shared/components/ui/input"
import { Label } from "@/shared/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"

export interface FileUploadValues {
  maxFileSize: number
  allowedTypes: string
}

interface FileUploadCardProps {
  values: FileUploadValues
  onChange: (key: keyof FileUploadValues, value: number | string) => void
}

/**
 * 管理员系统设置 - 文件上传卡片
 */
export function FileUploadCard({ values, onChange }: FileUploadCardProps): ReactElement {
  const t = useTranslations("settings.admin.fileUpload")

  return (
    <Card className="shadow-none">
      <CardHeader>
        <div className="flex items-center gap-2">
          <Database className="h-5 w-5 text-primary" />
          <div>
            <CardTitle className="text-base">{t("title")}</CardTitle>
            <CardDescription>{t("description")}</CardDescription>
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid gap-4 md:grid-cols-2">
          <div className="space-y-2">
            <Label htmlFor="max-file-size">{t("maxFileSize")}</Label>
            <Input
              id="max-file-size"
              name="maxFileSize"
              type="number"
              min={1}
              max={100}
              value={values.maxFileSize}
              onChange={(e) => onChange("maxFileSize", Number(e.target.value))}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="allowed-types">{t("allowedTypes")}</Label>
            <Input
              id="allowed-types"
              name="allowedTypes"
              placeholder={t("allowedTypesPlaceholder")}
              value={values.allowedTypes}
              onChange={(e) => onChange("allowedTypes", e.target.value)}
            />
          </div>
        </div>
      </CardContent>
    </Card>
  )
}