import React from 'react';
import { Card, CardHeader, CardContent, CardTitle } from '../ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';

const TwoColumnLayout = ({children, tabs}) => {
  const left = React.Children.toArray(children)[0];
  const right = React.Children.toArray(children).slice(1);
  
  return (
    <div className="h-screen bg-gray-50">
      <div className="mx-auto p-2 h-full max-w-[1800px]">
        <div className="flex flex-col md:flex-row gap-4 h-full">
          {/* Left Column */}
          <div className="w-full md:w-[37%] h-full">
            <Card className="flex flex-col h-full">
              <CardHeader className="pb-2 shrink-0">
                <CardTitle>Messages</CardTitle>
              </CardHeader>
              <CardContent className="flex-1  min-h-0">
                <div className="h-full">
                  {left}
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Right Column */}
          <div className="w-full md:w-[62%] h-full">
            <Card className="flex flex-col h-full">
              <CardContent className="flex flex-col h-full p-0">
                <Tabs defaultValue={tabs[0]} className="flex flex-col h-full">
                  <TabsList className={`grid w-full grid-cols-3 shrink-0`}>
                    {tabs.map(t => (
                      <TabsTrigger key={t} value={t}>{t}</TabsTrigger>
                    ))}
                  </TabsList>
                  
                  {tabs.map((tab, index) => (
                    <TabsContent 
                      key={tab}
                      value={tab} 
                      className="flex-1 overflow-auto min-h-0 p-6"
                    >
                      <div className="h-full flex flex-col">
                        <div className="flex-1 overflow-auto">
                          {right[index]}
                        </div>
                      </div>
                    </TabsContent>
                  ))}
                </Tabs>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TwoColumnLayout;