"use client";
import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { LanguageTranslation } from "@/components/validations/translations/translation";
import { ApplicationData } from "./types";

interface DataDisplayComponentProps {
  data: ApplicationData[];
  loading: boolean;
  error: Error | null;
  onUpdateClick: (item: ApplicationData) => void;
  translations: Record<string, LanguageTranslation>;
  lang: string;
}

export const DataDisplayComponent: React.FC<DataDisplayComponentProps> = ({
  data,
  loading,
  error,
  onUpdateClick,
  translations,
  lang,
}) => {
  if (loading) {
    return (
      <div className="w-full text-center py-8">Loading applications...</div>
    );
  }

  if (error) {
    return (
      <div className="w-full text-center py-8 text-red-500">
        Error loading applications: {error.message}
      </div>
    );
  }

  if (data.length === 0) {
    return <div className="w-full text-center py-8">No applications found</div>;
  }

  return (
    <div className="flex flex-wrap -mx-2">
      {data.map((app, index) => (
        <div
          key={index}
          className="w-full sm:w-1/5 p-1"
          onClick={() => onUpdateClick(app)}
        >
          <Card className="h-full hover:bg-accent/50 cursor-pointer transition-colors">
            <CardContent className="p-3">
              <div className="font-medium text-sm mb-1">{app.name}</div>
              <div className="space-y-0.5 text-xs">
                <div className="flex">
                  <span className="text-muted-foreground w-10">
                    {translations.code &&
                      translations.code[lang as keyof LanguageTranslation]}
                    :
                  </span>
                  <span className="truncate">{app.application_code}</span>
                </div>
                <div className="flex">
                  <span className="text-muted-foreground w-10">
                    {translations.url &&
                      translations.url[lang as keyof LanguageTranslation]}
                    :
                  </span>
                  <span className="truncate">{app.site_url}</span>
                </div>
                <div className="flex">
                  <span className="text-muted-foreground w-10">
                    {translations.type &&
                      translations.type[lang as keyof LanguageTranslation]}
                    :
                  </span>
                  <span className="truncate">{app.application_type}</span>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      ))}
    </div>
  );
};