import React from "react";
import { EntityDetailHeader } from "@/components/shared/components/detail/EntityDetailHeader";
import { ContactInfo } from "@/components/shared/components/detail/ContactInfo";
import { AddressDisplay } from "@/components/shared/components/detail/AddressDisplay";
import { ActivityTimeline } from "@/components/shared/components/detail/ActivityTimeline";

export interface SupplierDetailProps {
  data: {
    id: string;
    companyName?: string;
    company_name?: string;
    registrationName?: string;
    registration_name?: string;
    email?: string;
    phoneNumber?: string;
    phone_number?: string;
    website?: string;
    address?: any;
    createdAt?: string;
    created_at?: string;
    updatedAt?: string;
    updated_at?: string;
  };
  context?: "sheet" | "panel";
  onEditClick?: () => void;
  onDeleteClick?: () => void;
}

export function SupplierDetail({ 
  data, 
  context = "sheet", 
  onEditClick, 
  onDeleteClick 
}: SupplierDetailProps) {
  const companyName = data.companyName ?? data.company_name ?? "Lieferant";
  const registrationName = data.registrationName ?? data.registration_name;
  const phoneNumber = data.phoneNumber ?? data.phone_number;
  const createdAt = data.createdAt ?? data.created_at;
  const updatedAt = data.updatedAt ?? data.updated_at;

  return (
    <div className="space-y-6">
      <EntityDetailHeader
        title={companyName}
        subtitle={registrationName || data.email}
        avatar={{
          initials: companyName.substring(0, 2).toUpperCase()
        }}
        editUrl={onEditClick ? undefined : `/dashboard/suppliers/edit/${data.id}`}
        onDeleteClick={onDeleteClick}
        context={context}
      />

      <div className="grid grid-cols-1 gap-4">
        <ContactInfo
          email={data.email}
          phone={phoneNumber}
          website={data.website}
        />
        
        {data.address && (
          <AddressDisplay
            address={data.address}
            title="Adresse"
          />
        )}
      </div>

      {createdAt && (
        <ActivityTimeline
          createdAt={createdAt}
          updatedAt={updatedAt}
        />
      )}
    </div>
  );
}