vtorio/app/components/layout-configurations/LayoutSectionCard.tsx

"use client";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge as BadgeIcon } from "lucide-react";

interface LayoutSection {
  id: number;
  name: string;
  type: string;
  sheetName: string;
  startingRow?: number | null;
  endingRow?: number | null;
  tableName: string;
  fields: LayoutSectionField[];
}

interface LayoutSectionField {
  id: number;
  name: string;
  dataType: string;
  dataTypeFormat: string | null;
  cellPosition: string;
  importTableColumnName: string;
  importColumnOrderNumber: number;
}

interface LayoutSectionCardProps {
  section: LayoutSection;
}

export function LayoutSectionCard({ section }: LayoutSectionCardProps) {
  const getTypeColor = (type: string) => {
    switch (type.toLowerCase()) {
      case "properties":
        return "bg-blue-100 text-blue-800";
      case "grid":
        return "bg-green-100 text-green-800";
      default:
        return "bg-gray-100 text-gray-800";
    }
  };

  return (
    <Card>
      <CardHeader>
        <div className="flex justify-between items-start">
          <div>
            <CardTitle className="text-lg">{section.name}</CardTitle>
            <CardDescription>
              Sheet: {section.sheetName} | Table: {section.tableName}
            </CardDescription>
          </div>
          <Badge className={getTypeColor(section.type)}>
            {section.type}
          </Badge>
        </div>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div className="flex gap-4 text-sm">
            {section.startingRow && (
              <span>
                <strong>Rows:</strong> {section.startingRow} - {section.endingRow || "end"}
              </span>
            )}
            <span>
              <strong>Fields:</strong> {section.fields.length}
            </span>
          </div>

          {section.fields.length > 0 && (
            <div>
              <h4 className="font-medium mb-2">Fields</h4>
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Name</TableHead>
                      <TableHead>Type</TableHead>
                      <TableHead>Position</TableHead>
                      <TableHead>Column</TableHead>
                      <TableHead>Order</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {section.fields.map((field) => (
                      <TableRow key={field.id}>
                        <TableCell className="font-medium">{field.name}</TableCell>
                        <TableCell>
                          <Badge variant="outline" className="text-xs">
                            {field.dataType}
                          </Badge>
                        </TableCell>
                        <TableCell>{field.cellPosition}</TableCell>
                        <TableCell>{field.importTableColumnName}</TableCell>
                        <TableCell>{field.importColumnOrderNumber}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
}