import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Brain, Clock, Calendar, Coffee } from "lucide-react";

interface PrincipleItem {
  icon: React.ReactNode;
  title: string;
  description: string;
}

export default function WorkPrinciples() {
  const principles: PrincipleItem[] = [
    {
      icon: <Brain className="h-5 w-5 text-purple-500" />,
      title: "Protected Deep Work",
      description: "4 hours of focused deep work sessions spaced throughout the day",
    },
    {
      icon: <Clock className="h-5 w-5 text-blue-500" />,
      title: "Optimized Task Placement",
      description: "Team and admin tasks fit around deep work to avoid breaking flow",
    },
    {
      icon: <Coffee className="h-5 w-5 text-red-500" />,
      title: "Strategic Breaks",
      description: "Built-in breaks to maintain energy and focus throughout the day",
    },
    {
      icon: <Calendar className="h-5 w-5 text-green-500" />,
      title: "Flexible Planning",
      description: "Morning and end-of-day flexibility for syncing and wrap-up",
    },
  ];

  return (
    <Card className="hover-scale">
      <CardHeader>
        <CardTitle className="text-lg">Key Work Principles</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {principles.map((principle, index) => (
            <div key={index} className="flex items-start space-x-3">
              <div className="mt-0.5 bg-muted p-2 rounded-full">
                {principle.icon}
              </div>
              <div>
                <h3 className="font-medium">{principle.title}</h3>
                <p className="text-sm text-muted-foreground">{principle.description}</p>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}