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

export interface TaxClassDetailProps {
  data: {
    id: string;
    name: string;
    percentage: number;
    created_at?: string;
    updated_at?: string;
  };
  context?: "sheet" | "panel";
  onEditClick?: () => void;
  onDeleteClick?: () => void;
}

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

      <div className="grid grid-cols-1 gap-4">
        <div className="p-4 rounded-lg bg-muted/50 border border-border flex flex-col gap-3">
          <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">Details</h3>
          <div className="flex items-center gap-3">
            <div className="h-8 w-8 rounded-full bg-background flex items-center justify-center border text-muted-foreground">
              <span className="text-xs font-bold">%</span>
            </div>
            <span className="font-medium">{data.percentage}% Steuersatz</span>
          </div>
        </div>
      </div>

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