import { Button } from '@/component/ui/button'
import { Label } from '@/component/ui/label'
import { FileText, Settings } from 'lucide-react'
import { StandardsConfig } from './definition'

interface StandardsPreviewProps {
  config: StandardsConfig
}

const StandardSkeleton = ({ index }: { index: number }) => (
  <div className="flex items-center gap-2 rounded-md bg-muted/30 p-2 text-sm">
    <div className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-primary/10">
      <span className="text-xs font-medium text-primary">{index + 1}</span>
    </div>
    <div className="min-w-0 flex-1">
      <div className="mb-1 h-3 w-3/4 rounded bg-muted"></div>
      <div className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
        <FileText className="h-2.5 w-2.5" />
        <div className="h-2 w-16 rounded bg-muted"></div>
      </div>
    </div>
    <div className="h-5 w-12 shrink-0 rounded bg-muted"></div>
  </div>
)

export const StandardsPreview: React.FC<StandardsPreviewProps> = ({
  config,
}) => {
  const skeletonCount = config.maxItems || 7

  return (
    <div className="space-y-2">
      <div>
        <div className="mb-2 flex items-center justify-between">
          <Label className="text-sm font-medium">Эталоны</Label>
          <Button variant="outline" size="sm" disabled className="h-7 px-2">
            <Settings className="mr-1 h-3 w-3" />
            Настроить
          </Button>
        </div>

        <div className="space-y-2">
          <div className="space-y-1">
            {Array.from({ length: skeletonCount }, (_, index) => (
              <StandardSkeleton key={index} index={index} />
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}