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 ManufacturerDetailProps {
  data: {
    id: string;
    companyName: string;
    email?: string;
    phoneNumber?: string;
    website?: string;
    address?: {
      street?: string;
      house_number?: string;
      zip_code?: string;
      city?: string;
      country?: string;
    };
    createdAt?: string;
    updatedAt?: string;
  };
  context?: "sheet" | "panel";
  onEditClick?: () => void;
  onDeleteClick?: () => void;
}

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

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

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