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 BrandDetailProps {
  data: {
    id: string;
    name: string;
    description?: string;
    website?: string;
    email?: string;
    address?: {
      street?: string;
      house_number?: string;
      zip_code?: string;
      city?: string;
      country?: string;
    };
    created_at?: string;
    updated_at?: string;
  };
  context?: "sheet" | "panel";
  onEditClick?: () => void;
  onDeleteClick?: () => void;
}

export function BrandDetail({ 
  data, 
  context = "sheet", 
  onEditClick, 
  onDeleteClick 
}: BrandDetailProps) {
  return (
    <div className="space-y-6">
      <EntityDetailHeader
        title={data.name}
        subtitle={data.description || "Marke"}
        avatar={{
          initials: data.name.substring(0, 2).toUpperCase()
        }}
        editUrl={onEditClick ? undefined : `/dashboard/brands/edit/${data.id}`}
        onDeleteClick={onDeleteClick}
        context={context}
      />

      {data.description && (
        <div className="p-4 rounded-lg bg-muted/50 border border-border">
          <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider mb-2">Beschreibung</h3>
          <p className="text-sm">{data.description}</p>
        </div>
      )}

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

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